{{template "common/header.html" .}}
{{template "common/nav.html" .}}

<section class="main">
    <div class="container">

        <div class="card">
            <header class="card-header">
                <p class="card-header-title">修改资料</p>
            </header>
            <div class="card-content">

                <form method="post" action="{{baseUrl}}/user/edit/{{.UserId}}">

                    <div class="field">
                        <label class="label"><span style="color:red;">*&nbsp;</span>用户名</label>
                        <div class="control has-icons-left">
                            <input class="input is-success" type="text" disabled="disabled"
                                   value="{{.Username}}">
                            <span class="icon is-small is-left"><i class="iconfont icon-username"></i></span>
                        </div>
                    </div>

                    <div class="field">
                        <label class="label"><span style="color:red;">*&nbsp;</span>邮箱</label>
                        <div class="control has-icons-left">
                            <input class="input is-success" type="text" disabled="disabled"
                                   value="{{.Email}}">
                            <span class="icon is-small is-left"><i class="iconfont icon-email"></i></span>
                        </div>
                    </div>

                    <div class="field">
                        <label class="label"><span style="color:red;">*&nbsp;</span>昵称</label>
                        <div class="control has-icons-left">
                            <input name="nickname" class="input is-success" type="text"
                                   placeholder="请输入昵称" value="{{.Nickname}}">
                            <span class="icon is-small is-left"><i class="iconfont icon-username"></i></span>
                        </div>
                    </div>

                    <div class="field">
                        <label class="label"><span style="color:red;">*&nbsp;</span>头像</label>
                        <div class="control">
                            <img id="avatarImg" src="{{.Avatar}}" style="width: 150px;height:150px;"/>
                            <input id="avatar" name="avatar" type="hidden" value="{{.Avatar}}"/>
                            <div class="file">
                                <label class="file-label">
                                    <input class="file-input" type="file" id="avatar-input">
                                    <span class="file-cta"><span class="file-icon"><i class="iconfont icon-upload"></i></span>
                                    <span class="file-label">选择头像</span></span>
                                </label>
                            </div>
                            <span style="font-weight: bold; color:red;">*图像必须为正方形，大小不要超过1M。</span>
                        </div>
                    </div>

                    <div class="field">
                        <label class="label">简介</label>
                        <div class="control">
                            <textarea name="description" class="textarea" rows="2"
                                      placeholder="一句话介绍你自己">{{.Description}}</textarea>
                        </div>
                    </div>

                    {{if .ErrMsg}}
                        <div class="field">
                            <div class="control">
                                <strong><p class="help is-danger">{{.ErrMsg}}</p></strong>
                            </div>
                        </div>
                    {{end}}

                    <div class="field">
                        <div class="control">
                            <button id="btnSignUp" class="button is-success" type="submit">提交修改</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>

    </div>
</section>

<script type="text/javascript">
  $(document).ready(function () {
    $('#avatar-input').on('change', function () {
      if (this.files.length > 0) {
        imageUpload('{{baseUrl}}/upload', this.files[0]).then(function (data) {
          $('#avatarImg').attr('src', data.url)
          $('#avatar').val(data.url)
        }, function (data) {
          console.log(data)
          alert('图偶像上传失败')
        })
      }
    })
  })
</script>

{{template "common/footer.html" .}}
